<template>
 <div id="HomeJx">
    <div class="animation">
        <div class=" swiper-container">
        <ul class="swiper-wrapper">
            <li v-for="(item,index) in  imgs"  class="swiper-slide" 
            :class="'img'+index" :key="index">
                
                <img :src="item.cover" alt="" >
            </li>
             
        </ul>
        </div>
        <!-- 推荐歌单 -->
    <div class="recommenGd">
        <keep-alive>
        <component :is="iscommGd"></component>
      </keep-alive>     
    </div>
    <div class="list">
        <keep-alive>
        <Titles>
            <h1>独家放送</h1>
        </Titles>
        
      </keep-alive> 
      
        <ul class="djList">
        <!-- 接收父级数据 -->
        <li v-for="(items,index) in listData" :key="index">
            <img :src="items.cover" alt="">
            <span style="font-size:20px">{{items.title}}</span>
            <span></span>
        </li>

   
    </ul>
 
    </div> 
    <div class="NewMusic">
        <Titles>
            <h1>最新音乐</h1>
        </Titles>
        <NewMusic :data="NewMusicData"></NewMusic>
    </div>
    <div class="recommMv">
         <Titles>
            <h1>推荐MV</h1>
        </Titles>
        <SlotRecommMV :data="listData2"></SlotRecommMV>
    </div>
     <div class="zbMV">
         <Titles>
            <h1>主播电台</h1>
        </Titles>
        <SlotRecommMV :data="listDataDT"></SlotRecommMV>
    </div>
    </div>  
 </div>   
</template>

<script>
import recommenGd from '@/components/recommGd.vue'
import listS from '@/components/list.vue'
import Titles from '@/components/title.vue'
import NewMusic from '@/components/NewMusic.vue'
import SlotRecommMV from '@/components/slotRecommMV.vue'
import api from '../utils/api'
import Services from '../utils/Service'
export default {
    data() {
        return {
            iscommGd:recommenGd,
            imgs:[
                {
                id:'图片1',
                index:0,
                isList:listS,
                "cover":require('../../public/homeImg/109951167672133306.jpg')
            }
            ],
            // 独家放送
            listData:[

            //     {
            //     type:'LOOK',
            //     id:'图片1',
            //     title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
            //     index:'',
            //     "cover":require('../../public/homeImg/recommGd.jpg'),
            // },
            
           
            
            
            ],
            listData2:[
                
                {
                type:'MV',
                id:'图片1',
                title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
                index:'',
                "cover":require('../../public/homeImg/recommGd.jpg'),
                titleH1:'独家放送',
            },
            
            {   
                 type:'MV',
                id:'图片2',
                index:1,
                 title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
            
            {
                 type:'MV',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
             },
            {
                 type:'MV',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            }
            
            
            ],
             listDataDT:[
                
                {
                type:'DT',
                id:'图片1',
                title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
                index:'',
                "cover":require('../../public/homeImg/recommGd.jpg'),
                titleH1:'独家放送',
            },
            
            {   
                 type:'DT',
                id:'图片2',
                index:1,
                 title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
            
            {
                 type:'DT',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
             },
            {
                 type:'DT',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            }
            
            
            ],
            NewMusicData:[
                // {
                // id:'',
                // name:'',
                // alias:'',
                // singer:'',
                // cover:require('../../public/homeImg/recommGd.jpg'),
                // }
            ]
            
        }
    },
    components: {
    recommenGd,listS,Titles,NewMusic,SlotRecommMV
  },
  created() {
       this.$http.post('/api/banner',{
        type:0
    }).then((res)=>{
        // console.log(res)
          if (res.status == 200&&res.data.code ==200) {
            //  console.log(res+'轮播图')
                    for(var i = 0;i<res.data.banners.length;i++){
                        this.imgs.push({
                            cover:res.data.banners[i].imageUrl,
                            id:res.data.banners[i].targetId
                        })
                    }
                } else {
                    console.log(res)
                }
    }).catch((err)=>{
                console.log(err)
    })

  },
    mounted() {
		var mySwiper = new Swiper('.swiper-container', {
	        autoplay: 5000,//可选选项，自动滑动
            slidesPerView : 3,
            spaceBetween : 20,
            watchSlidesProgress : true,
            watchSlidesVisibility : true,
            observer:true,
            // observerParents:true
        })
        // this.getDj();
        // this.getNewMusicData()
	},
    methods: {
              async getNewMusicData(){
      var data = {
        limit:16
      }
      let res = await Services(api.newsong,data);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.result]
    const newArr = getData.map(function(item,index){
      return {
        name:getData[index].name,
        id:getData[index].id,
        picUrl:getData[index].picUrl,
        song:(function(song){
            let songName = ''
            for(var i = 0 ;i<song.artists.length;i++){
                songName += song.artists[i].name+'/'
            }
             return songName.substring(0,songName.length-1);
        })(getData[index].song)
      }
    })
    this.NewMusicData = newArr;
    // console.log(this.NewMusicData)
      }else{
        console.log(res+'独家')
      }
    },
        async getDj(){
      var data = {
        limit:3
      }
      let res = await Services(api.privatecontent,data);
      if(res.status == 200&&res.data.code==200){
        //  console.log(res)
        for (let index = 0; index < res.data.result.length; index++) {
            this.listData.push({
                id:res.data.result[index].id,
                title:res.data.result[index].name,
                // index:'',
                "cover":res.data.result[index].picUrl,
            })
        }
      }else{
        console.log(res+'独家')
      }
    },
    }
}
</script>
<style lang="less" scoped>
.animation{
    max-width: 95%;
    // border: solid forestgreen 1px;
    // width: 7.1875rem /* 1380/192 */;
    // width: 1440px;
    margin: 0 auto;
    // position: relative;
    .list>.djList{
       
           height:1.71875rem /* 330/192 */;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        //  justify-content: center;/*水平居中*/
    // align-items: center;/*垂直居中*/
    

     li{
             width: calc(calc(100% / 3));
            
            height:1.71875rem /* 330/192 */;
            box-sizing: border-box;
            // border: 1px solid #000;
        span,img{
                display: block;
    width: 96%;

    color: #373737;
        }
        img{
            //  height:90%;
            border-radius: 5%;
        }
     }
    }
    .liImg0{
            // position: relative;
            // left: 400px;
        }
        ul{
            width: 80%;
        }
    ul>li{
        width: 50%;
        

        img{
            width: 100%;
        }
        
    }
}

</style>